<template>
  <view class="zph-item" @click="toZphDetail(item)">
    <view class="cover-box">
      <image :src="item.bannerPath" mode="" class="cover" />
      <view class="time">
        <text class="time-text">{{ item.startTime }} - {{ item.endTime }}</text>
      </view>
    </view>
    <view class="u-line-1 title">{{ item.title }}</view>
    <view class="item-bottom">
      <view class="status" :class="'status-' + item.status">
        <template v-if="item.status == 1">
          <text class="icon icon-start"></text>
          <text>即将开始</text>
        </template>
        <template v-if="item.status == 2">
          <text class="icon icon-hot"></text>
          <text>进行中</text>
        </template>
        <template v-if="item.status == 3">
          <text class="icon icon-hot-off"></text>
          <text>已结束</text>
        </template>
      </view>
      <view class="num">{{ item.companyInNum || 0 }}家企业</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    toZphDetail() {
      uni.navigateTo({
        url: "/pagesSub/careerGrow/zph/detail?activityId=" + this.item.id,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.zph-item {
  display: inline-block;
  margin-bottom: $uni-spacing-col-lg;
  background-color: #fff;
  border-radius: 16rpx;
  .cover-box {
    position: relative;
    border-radius: 16rpx;
    overflow: hidden;
    .cover {
      border-radius: 16rpx;
      width: 275rpx;
      height: 384rpx;
    }
    .time {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding-top: 38rpx;
      font-size: 24rpx;
      color: #fff;
      text-align: center;
      height: 88rpx;
      background: linear-gradient(
        180deg,
        rgba(66, 66, 66, 0) 0%,
        rgba(31, 31, 31, 0.6) 100%
      );
    }
  }
  .title {
    padding: 24rpx 20rpx;
    line-height: 1;
    color: #000;
    font-size: $uni-font-size-base;
  }
  .item-bottom {
    display: flex;
    justify-content: space-between;
    padding: 0 24rpx 24rpx 24rpx;
    font-size: $uni-font-size-sm;

    .icon {
      margin-right: 12rpx;
      vertical-align: text-bottom;
      &-hot {
        width: 34rpx;
        height: 32rpx;
        background-image: url($img-base + "career/hot-on.png");
      }
      &-start {
        width: 28rpx;
        height: 28rpx;
        background-image: url($img-base + "career/start.png");
      }
      &-hot-off {
        width: 34rpx;
        height: 32rpx;
        background-image: url($img-base + "career/hot-off.png");
      }
    }

    .status {
      &-1 {
        color: #43b77f;
      }
      &-2 {
        color: #f04646;
      }
      &-3 {
        color: #888888;
      }
    }

    .num {
      color: rgba(0, 0, 0, 0.45);
    }
  }
}
</style>
